<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 400px;height:200px;border: solid 1px black;margin: 30px auto;position: relative;}
        .box p{height:30px;margin: 0;background: blue;width: 0;line-height: 30px;text-align: center;color: #fff;position: absolute;top:85px;}
        .alertBox{display: none;background: rgba(200,200,200,0.5);position: fixed;left:0;top:0;right:0;bottom:0;}
        .alertBox .alert{width:200px;height:200px;background-color: #fff;margin: 40px;}
    </style>
</head>
<body>
    <div class="box">
        <p></p>
    </div>

    <div class="alertBox">
        <div class="alert">
        </div>
    </div>
</body>
<script>

        let obox= document.querySelector('.box')
        let op= document.querySelector('.box p')
        let alertBox  = document.querySelector('.alertBox')
        
        const speed = 3;

        const target= 400;
        //计时器
        let t;

        document.onclick = function(){
            clearInterval(t);

            t = setInterval(()=>{
                
                if(target - op.ofsetWidth < speed){
                
                clearInterval(t);

                op.style.width = target + 'px';
                op.innerHTML = '100%';

                alertBox.style.display = 'break'
                }else{
                    
                    op.style.width=op.offsetWidth + speed + 'px'

                    op.innerHTML = parseInt((op.offsetWidth / target)*100)+ '%' ;
                }
            },30)
        }
</script>
</html>